<template>
    <div style="background:#f6f6f6;height:100%;display:flex;flex-direction: column">
        <mt-navbar v-model="selected" style="padding-bottom:0.1rem;">
            <mt-tab-item id="1">全部</mt-tab-item>
            <mt-tab-item id="2">已缴费</mt-tab-item>
            <!-- <mt-tab-item id="3">已欠费</mt-tab-item> -->
            <mt-tab-item id="4">已欠费</mt-tab-item>
        </mt-navbar>
            <!-- tab-container -->
        <mt-tab-container v-model="selected" style="flex-grow:1;height:100%;">
            <mt-tab-container-item id="1" style="height:100%;">
                <serviceList :show="selected==1"></serviceList>
            </mt-tab-container-item style="height:100%;">
            <mt-tab-container-item id="2">
                <serviceList patternStatus='1' :show="selected==2"></serviceList>
            </mt-tab-container-item style="height:100%;">
            <!-- <mt-tab-container-item id="3">
                <serviceList patternStatus='2' :show="selected==3"></serviceList>
            </mt-tab-container-item style="height:100%;"> -->
            <mt-tab-container-item id="4">
                <serviceList patternStatus='0' :show="selected==4"></serviceList>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>      
</template>
<script>
    import serviceList from '../components/serviceList.vue'
    export default {
        created() {
            // this.getList();
        },
        data() {
            return {
                selected: '1',
                list: [],

            }
        },
        components: {
            serviceList,
        },
        methods: {},
    }
</script>